<template>
  <div class="workbg" style="padding-top: 45px">
    <div class="pos_team_role">
      <div class="pos_team_role_div" v-for="item in val.tlist">
        <p>{{ item.lang1 }}</p>
        <template v-for="item in val.postm.data[item.name]">
          <img class="ava" 
          :src="$cfg.function.ava(item)"
          />
        </template>
      </div>
    </div>

    <n-hr />
    <div class="pos_main">
      <div v-for="item0 in val.tlist" :class="`pos_${item0.name}`" >
        <template v-for="(item, key) in val.tmuparrx5">
          <template v-for="(item2, key2) in val.tmuparrx4">
            <template v-if="val.team_posdata[item0.arr1]['x' + key2 + 'y' + key] != null">
              <n-popconfirm :show-icon="false">
                <template #trigger>
                  <div>
                    <template v-if="val.qsmode == true">
                      <img
                        @click="ct.rempos(item0.name, key2, key)"
                        :src="$cfg.function.ava(val.team_posdata[item0.arr1]['x' + key2 + 'y' + key])"
                        :class="`posatkicon ${item0.name}_y${key}_x${key2}`"
                      />
                    </template>
                    <template v-else>
                      <img 
                      :src="$cfg.function.ava(val.team_posdata[item0.arr1]['x' + key2 + 'y' + key])"
                        :class="`posatkicon ${item0.name}_y${key}_x${key2}`"
                      />
                    </template>

                    <img
                      v-if="
                        val.team_posdata[item0.arr1]['x' + key2 + 'y' + key] ==
                        val.postm.data[item0.name][0]
                      "
                      :class="`_cap${item0.name}`"
                      :src="img_cap"
                    />
                  </div>
                </template>
                <template #action>
                  <div>
                    <span style="color: var(--base-font-hover-color)"
                      >点击头像互换角色位置：</span
                    >
                    <div class="pos_team_role_div" style="margin-bottom: 8px">
                      <img
                        @click="ct.moverole(item0.name, 'x' + key2 + 'y' + key, key3)"
                        :src="$cfg.function.ava(val.team_posdata[item0.arr1]['x' + key2 + 'y' + key])"
                        :class="`posatkicon ${item0.name}_${key3}`"
                      />
                      》
                      <template v-for="(item3, key3) in val.team_posdata[item0.arr1]">
                        <div
                          style="height: 42px"
                          v-if="
                            item3 != null &&
                            item3 != val.team_posdata[item0.arr1]['x' + key2 + 'y' + key]
                          "
                        >
                          <img
                            @click="ct.moverole(item0.name, 'x' + key2 + 'y' + key, key3)"
                            style="width: 38px"
                            :src="$cfg.function.ava(item3)"
                            :class="`posatkicon ${item0.name}_${key3}`"
                          />
                        </div>
                      </template>
                    </div>
                    <n-button
                      size="small"
                      @click="ct.rempos(item0.name, key2, key)"
                      type="warning"
                      >移除角色</n-button
                    >
                  </div>
                </template>
              </n-popconfirm>
            </template>
            <template v-else>
              <div>
                <img
                  @click="ct.addpos(item0.name, key2, key)"
                  :src="item0.img2"
                  :class="`posatkicon ${item0.name}_y${key}_x${key2}`"
                />
              </div>
            </template>
          </template>
        </template>
      </div>
    </div>
    <div style="margin: 20px"></div>
    <template v-if="val.qsmode == true">
      <n-button size="small" @click="val.qsmode = false" type="warning"
        >关闭快速模式</n-button
      >
    </template>
    <template v-else>
      <n-button size="small" @click="val.qsmode = true" type="warning"
        >启用快速模式</n-button
      >
    </template>
    <n-hr />
    <!-- 编队顺序 -->
    <span style="color: var(--base-font-hover-color)">编队顺序 索敌相关 (可不填)：</span>
    <div class="pvp44_pos_team">
      <div class="_teamdiv" v-for="item1 in val.tlist">
        <span> ● {{ item1.tips }}顺序：</span>
        <div class="_teambox">
          <div :class="`_${item1.name}`" v-for="(item, key) in val.postm.data[item1.name]">
            <n-popconfirm :show-icon="false">
              <!-- 编队顺序 显示区 -->
              <template #trigger>
                <div class="_zw">
                  <template v-if="key == 0">
                    <img
                      style="width: 100%"
                      :src="$cfg.function.ava(item1.list[key])"
                    />
                  </template>
                  <template v-else-if="item1.list[key] == null">
                    {{ key + 1 }}号位
                  </template>
                  <template v-else
                    ><img
                      style="width: 100%"
                      :src="$cfg.function.ava(item1.list[key])"
                  /></template>
                </div>
              </template>
              <!-- 编队顺序 弹出层 -->
              <template #action>
                <div>
                  <template v-if="key == 0">队长不可修改</template>
                  <template v-else>
                    <p>{{ item1.tips }} {{ key + 1 }}号位 角色选择</p>
                    <div>
                      <template v-for="(item2, key2) in item1.img">
                        <img
                        v-if="key2>=1"
                        class="pvp44ava"
                        @click="ct.swposteam(item1,item2,key)"
                        :src="$cfg.function.ava(item2)"
                      />
                      </template>
                    </div>
                  </template>
                </div>
              </template>
            </n-popconfirm>
          </div>
        </div>
      </div>
    </div>
    <n-hr />
    <span style="color: var(--base-font-hover-color)">发布者留言：</span>
    <n-input v-model:value="val.possm" type="textarea"></n-input>
    <n-hr />
    <n-button type="warning" @click="ct.up_pos">上传该站位</n-button>
  </div>
</template>

<script>
import img_xatk from "@/assets/img/ep01.png";
import img_xdef from "@/assets/img/ep02.png";
import img_cap from "@/assets/img/cap01.png";
import img_defcap from "@/assets/img/cap02.png";
import { cfg } from "@/cfg/cfg.js";

export default {
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
  },
  setup(props) {
    let { ct, val } = props;
    val.team_posdata = {
      atk: [],
      atkobj: {},
      defobj: {},
      def: [],
    };
    val.possm = "";
    val.qsmode = false;
    val.tmuparrx4 = [[], [], [], []];
    val.tmuparrx5 = [[], [], [], [], []];

    val.tlist = [
      {
        name: "atk",
        tips: "进攻方",
        lang1 : "进攻队伍",
        arr1 : "atkobj",
        list: [val.postm.data.atk[0]],
        img: val.postm.data.atk,
        img2 : img_xatk,
      },
      {
        name: "def",
        tips: "防守方",
        lang1 : "防守队伍",
        arr1 : "defobj",
        list: [val.postm.data.def[0]],
        img: val.postm.data.def,
        img2 : img_xdef,
      },
    ];
    //替换角色
    ct.moverole = (type, role1, role2) => {
      let arr = [];
      if (type == "atk") {
        arr = val.team_posdata.atkobj;
      } else {
        arr = val.team_posdata.defobj;
      }
      //浅拷贝目标
      const cs1 = arr[role1].slice();
      const cs2 = arr[role2].slice();
      arr[role1] = cs2;
      arr[role2] = cs1;
    };
    //编队角色切换
    ct.swposteam = (item1,item2,key) => {
      //如果点击相同角色且相同位置则删除该角色
      if(item1.list.includes(item2) && item1.list[key] == item2){
        item1.list[key] = null;
        return false;
      }
      //如果不是相同位置目标位置为空的情况下 则替换位置
      if(item1.list.includes(item2) && item1.list[key] == null){
        const index = item1.list.indexOf(item2); 
        item1.list[index] = null;
        item1.list[key] = item2;
        return false;
      }
      //如果不是相同位置目标位置为有人的情况下 互相替换位置
      if(item1.list.includes(item2) && item1.list[key] != null){
        const index = item1.list.indexOf(item2);
        item1.list[index] = item1.list[key];
        item1.list[key] = item2;
        return false;
      }
      //都不符合的情况下新增角色
      item1.list[key] = item2;
      return false;
    }
    //上传角色
    ct.up_pos = async () => {
      if (val.team_posdata.atk.length <= 3) {
        cfg.msg.error(`进攻队伍未选择4个角色无法上传`, { duration: 2e3 });
        return false;
      }
      if (val.team_posdata.def.length <= 3) {
        cfg.msg.error(`防守队伍未选择4个角色无法上传`, { duration: 2e3 });
        return false;
      }
      const res = await cfg.axios.get(`${cfg.url}`, {
        params: {
          t: "v2/introduction/pvp44",
          type : "up_teampos", //上传站位
          atk: val.postm.data.atk, //进攻队伍图标
          def: val.postm.data.def, //防守队伍图标
          atkobj: val.team_posdata.atkobj, //进攻方棋盘
          atksort : val.tlist[0].list, //进攻方编队顺序
          defobj: val.team_posdata.defobj, //防守方棋盘
          defsort : val.tlist[1].list, //防守方编队顺序
          authkey: cfg.user.authkey,
          msg: val.possm, // 发布者留言
        },
      });
      const data = res.data;
      cfg.msg.info(data.msg, { duration: 2e3 });
      if (data.code == 0) {
        ct.pos_cktab(val.posdata.tab);
      }
    };
    //删除角色
    ct.rempos = (type, x, y) => {
      if (type == "atk") {
        val.team_posdata.atk = val.team_posdata.atk.filter(
          (item) => item !== val.team_posdata.atkobj["x" + x + "y" + y]
        );
        val.team_posdata.atkobj["x" + x + "y" + y] = null;
      }
      if (type == "def") {
        val.team_posdata.def = val.team_posdata.def.filter(
          (item) => item !== val.team_posdata.defobj["x" + x + "y" + y]
        );
        val.team_posdata.defobj["x" + x + "y" + y] = null;
      }
    };
    //添加角色
    ct.addpos = (type, x, y) => {
      //如果是进攻队伍
      if (type == "atk") {
        if (val.team_posdata.atk.length >= 4) {
          cfg.msg.error(`已选择四个角色（请点击角色撤销）`, { duration: 2e3 });
          return false;
        }
        //按照val.postm.data.atk [0] [1]顺序添加一个角色，这个角色[0]如果在val.team_posdata.atk则尝试添加[1]直到最后
        for (let i = 0; i < val.postm.data.atk.length; i++) {
          if (val.team_posdata.atk.indexOf(val.postm.data.atk[i]) == -1) {
            val.team_posdata.atk.push(val.postm.data.atk[i]);
            val.team_posdata.atkobj["x" + x + "y" + y] = val.postm.data.atk[i];
            break;
          }
        }
      }
      if (type == "def") {
        if (val.team_posdata.def.length >= 4) {
          cfg.msg.error(`已选择四个角色（请点击角色撤销）`, { duration: 2e3 });
          return false;
        }
        for (let i = 0; i < val.postm.data.def.length; i++) {
          if (val.team_posdata.def.indexOf(val.postm.data.def[i]) == -1) {
            val.team_posdata.def.push(val.postm.data.def[i]);
            val.team_posdata.defobj["x" + x + "y" + y] = val.postm.data.def[i];
            break;
          }
        }
      }
    };

    return { ct, val, img_xatk, img_xdef, img_cap, img_defcap };
  },
};
</script>
